<template>
  <div class="person">
    <h1>情况：若水温达到30度，或者水位达到20，则联系服务器</h1>
    <h2>水温：{{ temp }}</h2>
    <h2>水位：{{ height }}</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch, watchEffect } from 'vue'

let temp = ref(10)
let height = ref(0)

function changeTemp() {
  temp.value += 10
}

function changeHeight() {
  height.value += 10
}

// watch([temp, height], ([newTemp, newHeight]) => {
//   console.log('newTemp:', newTemp)
//   console.log('newHeight:', newHeight)
//   if (newTemp >= 30 || newHeight >= 20) {
//     console.log('联系服务器')
//   }
// })

watchEffect(() => {
  if (temp.value >= 30 || height.value >= 20) {
    console.log('联系服务器')
  }
})

</script>
<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>